<template>
  <div
    class="form-fragment animate__animated"
    :class="{ animate__bounceOutDown: isBack }"
  >
    <div class="top">
      <slot name="title"></slot>
    </div>
    <slot name="form"></slot>
    <div class="toggle" @click="back">
      <van-icon name="arrow-down" size="38" color="#fff" />
    </div>
  </div>
</template>

<script>
export default {
  name: "formFragment",
  data() {
    return {
      isBack: false,
      username: "",
      password: "",
    };
  },
  methods: {
    test(data) {
      console.log("fragment", data);
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    back() {
      this.isBack = true;
      setTimeout(() => {
        this.$emit("backMy");
      }, 600);
    },
  },
};
</script>

<style lang="scss">
.form-fragment {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  width: 100vw;
  z-index: 2;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}
.login-btn,
.reg-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 50px;
  background-color: #000;
  //   box-shadow: 4px 4px 2px rgb(199, 199, 199);
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.form {
  width: 95%;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 10px;

  .uploader-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .van-field {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .van-button {
    margin: 0 auto;
    width: 70%;
    background-color: #000;
    color: #fff;
    border: none;
  }
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}
</style>
